<template>
  <div class="notice-content" ref="noticeConten"
  :class="{'indexNews': $route.name === 'index',
  'tradeNews': $route.name === 'trade' || $route.name === 'embedTrade'}">
    <div class="mainView newsView">
      <div class="noticeHover"
      @mouseover="handleNoticeStoreScroll"
      @mouseout="handleNoticeScroll"
      style="position: relative; height: 35px; overflow: hidden; width: 1050px;"
      ref="noticeHover">
        <div style="position: absolute; width: 1050px;" class="noticeScroll" ref="noticeScroll">
          <div class="flex">
            <template v-for="(item, index) in noticeList">
              <div v-if="index < 3" :key="index" class="ovhide">
                <i class="smallIcon" v-if="!item.isLooked"></i>
                <a :href="item.htmlUrl" class="a" target="_blank" @click="handleToNews(index)">
                  <!-- 日期放后面 前面文字省略号 -->
                  <span class="currentLength">
                    {{ item.title }}
                  </span>
                  <span class="dateTime">
                    {{ item.createdAt | dateFormatMonth }}
                  </span>
                </a>
              </div>
            </template>
          </div>
          <div class="flex">
            <template v-for="(item, index) in noticeList">
              <div v-if="index > 2 && index < 6" :key="index" class="ovhide">
                <i class="smallIcon" v-if="!item.isLooked"></i>
                <a :href="item.htmlUrl" class="a" target="_blank" @click="handleToNews(index)">
                  <!-- 日期放后面 前面文字省略号 -->
                  <span class="currentLength">
                    {{ item.title }}
                  </span>
                  <span class="dateTime">
                    {{ item.createdAt | dateFormatMonth }}
                  </span>
                </a>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="morePush">
        <div class="pushIcon" @click="handleDropDown" v-if="!stopSwiper">
          <i class="iconfont el-icon-arrow-down"></i>
        </div>
        <div class="pushIcon" @click="handleDropUp" v-else>
          <i class="iconfont el-icon-arrow-up"></i>
        </div>
        <div class="moreWord">
          <a :href="more[$store.state.app.language]"
            target="_blank">
            <span style="float:right; padding: 0 5px;" class="colorThis"
            v-if="$route.name === 'trade' || $route.name === 'embedTrade'">{{$t('index.more')}}</span>
            <span style="float:right; padding: 0 5px;" class="colorThis" v-else>{{$t('index.more')}}></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'notice-content',
  data() {
    return {
      noticeList: [],
      more: {
      },
      language: '',
      noticeScrollTimer: null,
      isFirst: true, // 第一次页面加载
      stopSwiper: false, // 下拉停止轮播
    }
  },
  computed: {
  },
  watch: {
    '$store.state.app.notice': function change(val) {
      this.noticeList = val;
    }
  },
  mounted() {
    this.handleNoticeScroll();
    this.noticeList = this.$store.state.app.notice;
    this.handleMoreUrl();
  },
  beforeDestroy() {
    if (this.noticeScrollTimer) {
      clearInterval(this.noticeScrollTimer)
    }
  },
  methods: {
    handleMoreUrl() {
      this.more = {
        'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/categories/360000802432-%E5%85%AC%E5%91%8A%E4%B8%AD%E5%BF%83',
        'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/categories/360000802432-%E5%85%AC%E5%91%8A%E4%B8%AD%E5%BF%83',
        en: 'https://newdex.zendesk.com/hc/en-us/categories/360000802432-Announcements',
        ko: 'https://newdex.zendesk.com/hc/en-us/categories/360000802432-Announcements',
      };
      if (this.$appName === 'tronNewdex') {
        this.more = {
          'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/categories/360002004831-TRON-%E5%85%AC%E5%91%8A%E4%B8%AD%E5%BF%83',
          'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/categories/360002004831-TRON-%E5%85%AC%E5%91%8A%E4%B8%AD%E5%BF%83',
          en: 'https://newdex.zendesk.com/hc/en-us/categories/360002004831-TRON-Announcements',
          ko: 'https://newdex.zendesk.com/hc/ko/categories/360002004831-TRON-%EA%B3%B5%EC%A7%80-%EC%82%AC%ED%95%AD',
        }
      }
    },
    // 跳转到公告判断有没读过标识
    handleToNews(index) {
      this.noticeList[index].isLooked = true;
      this.$set(this.noticeList, index, this.noticeList[index]);
      this.$store.dispatch('setNotice', this.noticeList);
    },
    // notice 滚动
    handleNoticeScroll() {
      if (this.stopSwiper || this.$route.name === 'trade') return;
      let noticeScrollWay = -35;
      this.noticeScrollTimer = setInterval(() => {
        if (this.$refs.noticeScroll) {
          this.$refs.noticeScroll.style = `transform: translateY(${noticeScrollWay}px) scale(1);`;
        }
        if (noticeScrollWay === 0) {
          noticeScrollWay = -35;
        } else {
          noticeScrollWay = 0;
        }
      }, 5000)
    },
    // 暂停 notice 滚动
    handleNoticeStoreScroll() {
      if (this.noticeScrollTimer) {
        clearInterval(this.noticeScrollTimer);
      }
    },
    // 点击下拉
    handleDropDown() {
      this.$refs.noticeConten.style.height = '70px';
      this.$refs.noticeHover.style.height = '70px';
      this.$refs.noticeScroll.style = 'transform: translateY(0px) scale(1);';
      this.stopSwiper = true;
      this.handleNoticeStoreScroll();
    },
    // 点击关闭
    handleDropUp() {
      this.$refs.noticeConten.style.height = '35px';
      this.$refs.noticeHover.style.height = '35px';
      this.$refs.noticeScroll.style = 'transform: translateY(0px) scale(1);';
      this.stopSwiper = false;
      this.handleNoticeScroll();
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
.notice-content {
  color: white;
  background-color: #f3f3f3;
  font-size: 13px;
  height: 35px;
  color: #999;
  line-height: 35px;

  .mainView {
    text-align: center;
    width: 1260px;
    margin: auto;
  }
  .noticeScroll {
    transition: transform .4s ease-in-out;
  }
  .morePush {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 210px;
    .moreWord {
      position: absolute;
      top: 35px;
      right: -4px;
      width: 80px;
      height: 35px;
      color: #fff;
    }
    .pushIcon {
      position: absolute;
      top: 0px;
      right: -7px;
      text-align: center;
      width: 40px;
      i {
        font-size: 18px;
        &:hover {
          color: #278EDA;
        }
      }
    }

    a:hover {
      font-weight: bold;
    }
  }
  .ovhide{
    position: relative;
    margin-right: 20px;
    padding-left: 10px;
    flex: 5 !important;
    min-width: 33%;

    i {
      position: absolute;
      top: 50%;
      left: 0;
      width: 6px;
      height: 6px;
      margin-top: -3px;
      border-radius: 50%;
      background-color: #f56c6c;
      display: inline-block;
    }
  }

  .a{
    display: block;
    width: 100%;
  }

  .dateTime{
    float: left;
    margin-left: 17px;
  }

  .newsView {
    @include flexbox();

    div {
      @include flex(5);
      line-height: 35px;
      text-align: left;
    }

    div:last-child {
      @include flex(1);
      text-align: right;
    }

    .currentLength{
      float: left;
      width: 75%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
    }

    a .new-time {
      float: left;
      margin-left: 20px;
    }
  }
}
.indexNews {
  position: absolute;
  margin-top: -35px;
  color: white;
  width: 100%;
  background-color: rgba(0, 0, 0, .3) !important;
  .moreWord {
    top: 0 !important;
    right: 0px !important;
    span {
      color: #fff !important;
      &:hover {
        color: #278EDA !important;
        font-weight: normal;
      }
    }
  }
  .pushIcon {
    top: 35px !important;
    right: 0px !important;
  }
}
.theme-1B1D27 {
  .notice-content {
    background-color: $-topcolor;
    color: $-table-head;

    .colorThis {
      color: $-table-head !important;
    }
  }
}
</style>
